import React, { useEffect, useState } from 'react'
import './index.css'
import Item from './Item'

import PubSub from 'pubsub-js'

export default function List() {

  const [{todoList, setTodoList}, setDate] = useState({todoList:[]})

  useEffect(() => {
    // 订阅
    const pubsubToken = PubSub.subscribe('todoList', (_, data) => {
      setDate(data)
    })
    return () => {
      PubSub.unsubscribe(pubsubToken)
    }
  }, [])

  return (
    <ul className="todo-main">
      {
        todoList.map(item => <Item key={item.id} {...item} todoList={todoList} setTodoList={setTodoList} />)
      }
    </ul>
  )
}
